import { AfterContentChecked, AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Output, QueryList, Renderer2, ViewChildren } from '@angular/core';

@Component({
  selector: 'app-filter-sexy',
  templateUrl: './filter-sexy.component.html',
  styleUrls: ['./filter-sexy.component.scss']
})
export class FilterSexyComponent implements AfterViewInit, AfterContentChecked {

  constructor(private el: ElementRef, private renderer: Renderer2) {

  }
  ngAfterContentChecked(): void {
    // throw new Error('Method not implemented.');
  }

  //  <!--使用Renderer2 添加监听事件。取代直接在模版上chane事件使用-->
  ngAfterViewInit() {
    // const inputs = this.el.nativeElement.querySelectorAll('input[type=radio]');
    // inputs.forEach((input: HTMLInputElement) => {
    //   this.renderer.listen(input, 'change', (event) => {
    //     const target = event.target as HTMLInputElement;
    //     this.sexChange(target?.getAttribute("ng-reflect-value") || "");
    //   });
    // });
  }

  // <!-- 使用@hotlistener 监听事件-->
  @ViewChildren("radiosexy") radiosexy:QueryList<ElementRef>|undefined;
  @HostListener('change', ['$event'])
  onRadioChange(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target?.type === 'radio') { // 检查目标元素是否为 type="radio"
      this.radiosexy?.forEach((item)=>{// 检查目标元素是否为男女性别radio
        if (target === item.nativeElement) {
          this.sexChange(target?.getAttribute("ng-reflect-value") || "");
        }
      })      
    }

    console.log('Selected value:', target.value);
  }


  selectedSexyValue: string = '2'; // 默认选项 男女
  //男女
  sexyOptions = [
    { id: 'option0', value: '0', label: '女' },
    { id: 'option1', value: '1', label: '男' },
    { id: 'option2', value: '2', label: '所有' },
  ];





  // @Output自定义事件绑定
  @Output()
  onFilterSexyChange = new EventEmitter<string>();

  //男女筛选
  sexChange(value: string) {
    this.selectedSexyValue = value;
    this.onFilterSexyChange.emit(this.selectedSexyValue);
  }
}
